@import '../../app.less';

@font-face {
  font-family: "JZunYuan";
  //src:url("/images/watergame/JZunYuan.ttf") format("truetype")
  src:url("https://www.w3school.com.cn/example/css3/Sansation_Light.ttf") format("truetype")

}

.container {
  width: 100%;
  background: #f1f1f1;
  .activity-area {
    position: relative;
    width: 100%;
    height: 1068rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .bottle-bg {
      position: relative;
      top:26.32%;
      margin: 0 auto;
      width: 255rpx;
      height: 549rpx;
      background-size: cover;
      background-repeat: no-repeat;
      image{
        position: absolute;
        top: 0;
        z-index: 50;
        width:100%;
        height:100%
      }
    }
    .water {
      position: absolute;
      left:4px;
      bottom:0;
      width: 247rpx;
      height: 352rpx;
      z-index: 40;
      background-size: 100% 352rpx;
      background-repeat: no-repeat;
      background-image: url('http://hi.lengjishan.cn/new/resource/watergame/warter.png');
      background-position:0 bottom;
    }
    
    .exchange-btn, .achievement-btn, .rule-btn {
      position: absolute;
      top:34%;
      right:20rpx;
      width: 68rpx;
      height: 77rpx;
      text-align: center;
      background-size:100% 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .exchange-btn{
      min-width: 107rpx;
      width: auto;
      border-radius: 40rpx;
      border: 4px solid #791fb9;
      height: 51rpx;
      color: #fff;
      font-size: 21rpx;
      padding: 2rpx 15rpx;
      line-height: 42rpx;
      white-space: nowrap;
      display: inline-block;
      background-size:100% 100%;
      text{
        font-size: 21rpx;
        margin-right:5rpx;
      }
    }
    .circle{
      position: absolute;
      right:7rpx;
      top:-11rpx;
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: #791fb9;
      border:3px solid #fff;
    }
   
    .drop-font-icon{
      display: inline-block;
      vertical-align: top;
      width: 18rpx;
      height: 18rpx;
      background-size:contain;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .drop-font-icon-blue{
      background-image: url('http://hi.lengjishan.cn/new/resource/watergame/small-icon3.png')
    };
    .drop-font-icon-purple{
      background-image: url('http://hi.lengjishan.cn/new/resource/watergame/small-icon2.png')
    };
    .drop-font-icon-green{
      background-image: url('http://hi.lengjishan.cn/new/resource/watergame/small-icon1.png')
    };
    .drop-font-icon1 {
      position: absolute;
      top:10rpx;
    }
    .drop-font-icon2 {
      position: absolute;
      top:20rpx;
    }
    .drop-font-icon3 {
      position: absolute;
      top:30rpx;
    }
    .drop-font-icon4 {
      position: absolute;
      top:40rpx;
    }
    .drop-font-icon-5 {
      position: absolute;
      top:50rpx;
    }

    .achievement-btn {
      top:43%;
      background-image: url('http://hi.lengjishan.cn/new/resource/watergame/icon-water-lable1.png');
    }
    .rule-btn {
      top:53.2%;
      background-image: url('http://hi.lengjishan.cn/new/resource/watergame/icon-water-lable2.png');
    }

    .drop{
      width: 60rpx;
      height: 75rpx;
      background-image: url('http://hi.lengjishan.cn/new/resource/watergame/icon-water-damond1.png');
      background-size:contain;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      line-height: 75rpx;
      position: absolute;
      text-align: center;
      top:0;
    }
    

    .stroke{
      font-family: JZunYuan;
      font-size: 28rpx;
      font-weight: bold;
      letter-spacing: -4px;
      color: #fff;
      display: inline;
      margin-left: -8px;;
    }
    .stroke-blue,.stroke-task1{
      text-shadow: #4facff 1px 0 0, #4facff 0 1px 0, #4facff -1px 0 0, #4facff 0 -1px 0;
    }
    .stroke- violet,.stroke-task2{
      text-shadow: #cb7df4 1px 0 0, #cb7df4 0 1px 0, #cb7df4 -1px 0 0, #cb7df4 0 -1px 0;
    }
    .stroke-green,.stroke-task3{
      text-shadow: #65ae36 1px 0 0, #65ae36 0 1px 0, #65ae36 -1px 0 0, #65ae36 0 -1px 0;
    }
  }
  .task {
    width: 680rpx;
    padding: 55rpx 30rpx 50rpx 45rpx;
    margin: 20rpx auto;
    background: #0a9dcc;
    border-radius: 20rpx;
    border: solid 5rpx #ffffff;
    .task-title {
      width: 264rpx;
      height: 66rpx;
      color: #ffffff;
      font-size: 50rpx;
      line-height: 66rpx;
      background: #2b85b8;
      margin-bottom: 15rpx;
      text-align: center;
      border-radius: 33rpx;
      margin-left: 170rpx;
    }
    .task-item {
      width: 597rpx;
      border-radius: 20rpx;
      padding: 20rpx 0;
      margin: 30rpx 0;
      .task-icon {
        width: 109rpx;
        height: 109rpx;
        border-radius: 50%;
        margin: 0 25rpx 0 42rpx;
      }
      .task-info {
        width: 210rpx;
        color: #ffffff;
        .task-info-title {
          font-size: 34rpx;
        }
        .task-text {
          font-size: 22rpx;
          line-height: 34rpx;
        }
      }
      .complete-btn {
        width: 118rpx;
        height: 34rpx;
        font-size: 22rpx;
        line-height: 34rpx;
        background: #ffffff;
        border-radius: 17rpx;
        text-align: center;
        margin: 0 48rpx;
      }
      &.task-item01 {
        background: #5cab66;
        .complete-btn {
          color: #5cab66;
        }
      }
      &.task-item02 {
        background: #4bbe88;
        .complete-btn {
          color: #4bbe88;
        }
      }
      &.task-item03 {
        background: #e9a94a;
        .complete-btn {
          color: #e9a94a;
        }
      }
      &.task-item04 {
        background: #ec996b;
        .complete-btn {
          color: #ec996b;
        }
      }
      &.task-item05 {
        background: #216bed;
        .complete-btn {
          color: #216bed;
        }
      }
      &.task-item06 {
        background: #f47b3d;
        .complete-btn {
          color: #f47b3d;
        }
      }
    }

  }
}